<script setup>
	import {ref} from "vue"
	
    const currentTab = ref(0);
	
	const count = ref({
		wid:"",
		wide:''
	})
	const customClick =()=>{
		const queryString = {
			photo:'自定义'
		}

		if(count.value.wid >=100 &&count.value.wide >= 100){
			uni.navigateTo({
				url:`/subpack-age/details/index?${queryString}`
			})	
		}else if(count.value.wid ==='' &&count.value.wide === '') {
			uni.showToast({
				title:'宽和高不能为空'
			})
		}else if(count.value.wid <100 &&count.value.wide <100) {
			uni.showToast({
				title:'图片像素范围为100~2000，请重新输入'
			})
		}
		
		
	}
</script>
<template>
	<view class="custom">
		<view class="custom-size">
			<view class="imagesbtn">
				<image class="images" src="../../static/index.png" alt="Description"></image>
			</view>
		</view>
		<view class="pixel">
			<view class="top">
				<text class="tab" @click="currentTab = 0"  :class="{ active: currentTab === 0 }" >像素</text>
				<text class="tab" @click="currentTab = 1" :class="{ active: currentTab === 1 }">毫米</text>
			</view>
				<!-- 像素 -->
			<view class="bottom" v-if="currentTab === 0">
			<view class="wide">
				<view class="widebtn">
					<text>宽</text>
					<text style="color: #FF2200; font-size: 32rpx;">*</text>
				</view>
				<view class="mybtn">
					<input class="inputs"  v-model="count.wid" type="text" placeholder="8~169" />
					<text class="pxbtns">( px )</text>
				</view>
			</view>
			<view class="wide">
				<view class="widebtn">
					<text>高</text>
					<text style="color: #FF2200; font-size: 32rpx;">*</text>
				</view>
				<view class="mybtn">
					<input class="inputs" v-model="count.wide" type="text" placeholder="8~169" />
					<text class="pxbtns">( px )</text>
				</view>
			</view>
			</view>
			<!-- 毫米 -->
			<view class="bottom"  v-if="currentTab === 1">
			<view class="wide">
				<view class="widebtn">
					<text>宽</text>
					<text style="color: #FF2200; font-size: 32rpx;">*</text>
				</view>
				<view class="mybtn">
					<input class="inputs" v-model="count.wid" type="text" placeholder="100~2000" />
					<text class="pxbtns">( mm )</text>
				</view>
			</view>
			<view class="wide">
				<view class="widebtn">
					<text>高</text>
					<text style="color: #FF2200; font-size: 32rpx;">*</text>
				</view>
				<view class="mybtn">
					<input class="inputs" v-model="count.wide" type="text" placeholder="100~2000" />
					<text class="pxbtns">( mm )</text>
				</view>
			</view>
			</view>
		</view>
		
		<view class="bottoms" @click="customClick">
			下一步
		</view>
	</view>
</template>

<style scoped lang="scss">
	
	.custom {
		width: 100%;
		height: 100%;
		
		.bottoms{
			width: 600rpx;
			height: 120rpx;
			background: #028DFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 120rpx;
			text-align: center;
			margin: 82rpx 75rpx 0;
			
		}
		.pixel {
			width: 100%;
			height: 352rpx;
			// background-color: aqua;
			.bottom {
				border-top: 1px solid #eee;
				.wide {
					width: 100%;
					height: 88rpx;
					margin-top: 40rpx;
					display: flex;
					padding: 0 40rpx;
					// justify-content: space-between;
				}
				.widebtn {
					margin-top: 20rpx;
					font-size: 32rpx;
				}
				.mybtn {
					position: relative;
					width: 585rpx;
					height: 88rpx;
					background: #EEEEEE;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					margin-left: 30rpx;
					.pxbtns {
						position: absolute;
						top: 30%;
						right: 30rpx;
						font-size: 32rpx;
						color: #333333;
						font-weight: 600;
					}
					.inputs {
						width: 200rpx;
						height: 100%;
						background-color: #eee;
						padding: 0 200rpx;
					}
				}
			}
			.top {
				width: 100%;
				height: 96rpx;
		
				.active {
					border-bottom: 5rpx solid #3A7CF8;
					color: #3A7CF8;
					
					    // transition: border-width 1s ease, border-color 1s ease;
				}
				
				.tab {
					display: inline-block;
					width: 375rpx;
					font-weight: 400;
					height: 100%;
					font-size: 36rpx;
					color: #999999;
					text-align: center;
					line-height: 96rpx;
					
				
					
				}
			}
			
			
		}
		
		.custom-size{
			display: flex;
			justify-content: center;
			align-items: center;
		width: 750rpx;
		height: 750rpx;
		background: #F7F7F7;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
			
			.imagesbtn {
				width: 450rpx;
				height: 680rpx;
				background-color: #fff;
				.images {
					width: 97%;
					height: 99%;
				}
			}
		}
	}
</style>